<template>
  <div>
    <el-table :data="currentPageData" style="width: 100%">
      <el-table-column prop="image" label="" width="180">
      </el-table-column>
      <el-table-column prop="name" label="类型" width="180">
      </el-table-column>
      <el-table-column prop="title" label="标题" width="180">
      </el-table-column>
      <!-- <el-table-column prop="explain" label="说明">
            </el-table-column>
            <el-table-column prop="creation-time" label="创建时间">
            </el-table-column> -->
      <el-table-column prop="operation" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit-outline"
            slot="prepend">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" icon="el-icon-close"
            slot="prepend">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pager :page=page :limit=limit :total=total :lastPage=lastPage @handleSizeChange="handleSizeChange" @toLastPage="toLastPage" @toFirstPage="toFirstPage" @handleCurrentChange="handleCurrentChange"></pager>
  </div>
</template>

<script>
import pager from "../components/pager.vue";
export default {
  name: "signatureManagementList",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'

      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'

      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'

      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'

      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'

      }
      ],
      page: 1,
      limit: 3,
      lastPage: 0,
      total:0,
      currentPageData: [], //当前页显示内容
    }
  },
  components: {
    pager
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.lastPage = Math.ceil(this.tableData.length / this.limit);
      this.getCurrentPageData()
    },
    getCurrentPageData() {
      let begin = (this.page - 1) * this.limit;
      let end = this.page * this.limit;
      this.currentPageData = this.tableData.slice(begin, end)
    },
    toLastPage(val) {
      this.page = val;
      this.getCurrentPageData()
    },
    toFirstPage(val){
      this.page = val;
      this.getCurrentPageData()
    },
    handleCurrentChange(val){
      this.page = val;
      this.getCurrentPageData(val)
    }
  },
  created() {
    this.lastPage = Math.ceil(this.tableData.length / this.limit)
    this.total=this.tableData.length
    this.getCurrentPageData();
  }

}
</script>

<style  scoped>

</style>